<template>
  <div id="content">
    <div id="main-frame-error" class="interstitial-wrapper ">
      <div id="main-content">
        <div class="icon icon-generic"></div>
        <div id="main-message">
          <h1>
            <span>无法访问此网站</span>
          </h1>
          <p><strong>lammu.cn</strong> 的响应时间过长。</p>
          <div id="suggestions-list">
            <p>请试试以下办法：</p>
            <ul class="">
              <li style="padding: 3px 0; margin: 3px 0;" @click="setIndex(0)">· 检查网络连接</li>
              <li style="padding: 3px 0; margin: 3px 0;" @click="setIndex(1)">· 检查代理服务器和防火墙</li>
              <li style="padding: 3px 0; margin: 3px 0;" @click="setIndex(2)">· 运行网络诊断</li>
            </ul>
          </div>
          <div class="error-code">ERR_CONNECTION_TIMED_OUT</div>
        </div>
      </div>
      <div id="buttons" class="nav-wrapper suggested-left">
        <div id="control-buttons">
          <button id="reload-button" class="blue-button text-button" data-url="https://github.com/LAMMUpro">
            重新加载
          </button>
        </div>
        <button id="details-button" class="secondary-button text-button
              small-link ">
          详情
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits<{
  (e: 'success'): void
}>();

const dot1 = ref(false);
const dot2 = ref(false);
const dot3 = ref(false);

function setIndex(index: number) {
  if (index === 0) {
    dot1.value = true;
  } else if (index === 1) {
    if (dot1.value === true) {
      dot2.value = true;
    } else {
      dot1.value = dot2.value = dot3.value = false;
    }
  } else if (index === 2) {
    if (dot1.value === true && dot2.value === true) {
      dot3.value = true;
      emit('success');
    } else {
      dot1.value = dot2.value = dot3.value = false;
    }
  }
}

</script>

<style lang="scss" scoped>
//
</style>
